<template>
    <div class="pay-choose">
        <div class="pay-amount">
            <div class="order">订单金额</div>
            <div class="amount" v-if="type === 2">{{payList.total | moneyFmt(2, '')}}</div>
            <div class="amount" v-else>{{payList.total | moneyFmt(2, '￥')}}</div>
        </div>
        <div class="line"></div>
        <div class="pay-amount">
            <div class="order">推荐人</div>
            <div class="amount" style="color: #333">{{payList.rec_name}}</div>
        </div>
        <div class="pay-method">
            <div class="sigle-method" v-for="(item, index) in payList.list" :key="index">
                <div class="icon">
                    <svg aria-hidden="true" class="icon-methods">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                </div>
                <div class="pay-name" @click="chooseWay(item)">
                    <div class="name">{{item.title}}支付</div>
                    <svg class="icon selected" aria-hidden="true"
                         :class="item.type === getpayType? 'choose' : 'no-choose' ">
                        <use xlink:href="#icon-selected"></use>
                    </svg>
                </div>
            </div>
        </div>
        <confirm ref="frozen" :text="confirmText" :isAlert="isFrozen" @confirm="frozen"/>
        <div class="confirm" @click="toPay">去支付</div>
        <div class="prompt">
            <div>温馨提示：</div>
            <div>支付完成后将会生成您的专属二维码，</div>
            <div>请勿关闭当前页面。</div>
        </div>
    </div>
</template>

<script>
    import API from '../../request/api';
    import {commonMixin} from '@/common/mixin';
    import Confirm from '../../components/common/confirm';

    export default {
        components: {Confirm},
        mixins: [commonMixin],
        name: 'pay-choose',
        data() {
            return {
                type: '', // 页面类型
                payList: [], // 页面信息
                payType: '', // 选中的支付方式
                isFrozen: true,
                confirmText: ''

            };
        },
        computed: {
            getpayType() {
                // alert(this.payType)
                return this.payType;
            }
        },
        methods: {
            getPayWay() {
                let payData = this.$store.state.online.createPayData;
                let getData;
                if (payData.getWayData) {
                    getData = payData.getWayData;
                    this.type = payData.type;
                } else {
                    getData = this.$route.params.getWayData;
                    this.type = this.$route.params.type;
                }

                // this.payList.amount = this.$route.params.amount;
                // 获取 支付方式
                this.request.get(API.getPayMethods, getData).then((result) => {
                    this.payList = result;
                    this.hideGlobaLoading(); //关闭loading
                    this.defaultPayWay();
                    let data = payData;
                    data.ticket_id = this.payList.ticket_id;
                    data.total = this.payList.total;
                    this.$store.commit('dataCreatePay', data);
                    console.log('getPayMethods-result', result, this.payList);
                });
            },
            defaultPayWay() {
                for (let i in this.payList.list) {
                    if (!this.payList.list[0].insufficient) {
                        this.payType = this.payList.list[0].type;
                    } else {
                        this.payType = this.payList.list[i].type;
                    }
                }
            },
            chooseWay(item) {
                // // 零钱类型不可选中
                // if(item.type !== 'integral') {
                // alert(item.insufficient)
                // 余额不足
                if (item.insufficient) {
                    this.$toast({
                        message: '余额不足，请重新选择支付方式！',
                        duration: 1000
                    });
                    this.payType = '';
                } else {
                    // 正常选中与不选中
                    if (item.type !== this.payType) {
                        this.payType = item.type;
                    } else {
                        this.payType = '';
                    }
                    // console.log('createPaycreatePay', this.payType, item.type);
                }
                // }
            },
            toPay() {
                if (this.payType === '') {
                    this.$toast({
                        message: '您还未选择支付方式!',
                        duration: 1000
                    });
                } else {
                    // 生成支付票据
                    let createPayData = this.$store.state.online.createPayData;
                    let postData = createPayData.getWayData;
                    postData.pay_method = this.payType;
                    console.log('createPaycreatePay', postData);
                    this.request.post(API.createPay, postData)
                        .then((result) => {
                            console.log('createPay-result', result);
                            if (result.status && result.status == 'no') {
                                this.BtnText = '确定';
                                this.confirmText = result.msg;
                                this.redirect = result.redirect;
                                this.$refs.frozen.show();// 弹出账号已冻结弹框
                            } else {
                                if (result.ticket_id) {
                                    createPayData.getWayData.ticket_id = result.ticket_id;
                                    this.$store.commit('dataCreatePay', createPayData);
                                    //将ticket_id及系统号存入缓存，七夕活动
                                    let data2 = {
                                        ticket: result.ticket_id,
                                        system: this.$store.state.login.system
                                    };
                                    this.$store.commit('ticketArr', data2);
                                    if (this.payType === 'wxQr') {
                                        this.$router.replace({
                                            name: 'pay-sure-wx',
                                            query: {
                                                type: 'wxQr',
                                            }
                                        });
                                    } else if (result.url) {
                                        if (window.__wxjs_environment === 'miniprogram') {
                                            //    判断是否小程序环境
                                            this.$router.replace({
                                                name: 'pay-sure-wx'
                                            });
                                        } else {
                                            window.location.href = result.url;
                                        }

                                    } else {
                                        this.$router.replace({
                                            name: 'pay-sure-' + this.payType,
                                        });
                                    }
                                }

                            }
                        }).catch((err) => {
                        console.error('createPay-error:', err);
                    });
                }
            },
            frozen() {
                this.$router.replace(this.redirect);
            },
        },
        mounted() {
            this.showGlobaLoading(); //打开loading
            if (this.$store.state.online.createPayData !== '') {
                this.getPayWay();
            } else {
                this.$router.replace({
                    name: 'order-list-new',
                    query: {
                        active: 0
                    }
                });
                this.hideGlobaLoading(); //关闭loading
            }

        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    .pay-amount {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: grayF;
        width: 100%;
        height: vw(46);
        word-vw(word16, gray3);
        line-height: vw(21);

        .order {
            margin-left: cellPadding;
        }

        .amount {
            margin-right: cellPadding;
            color: main-color;
        }
    }

    .pay-method {
        width: 100%;
        background-color: grayF;
        margin-top: middleMargin;

        .sigle-method {
            width: vw(373);
            height: vw(46);

            .icon {
                float: left;
                height: 100%;
                width: vw(26);
                padding-left: cellPadding;
                padding-right: cellPadding;
                display: flex;
                align-items: center;

                /* border 1px salmon solid */

                .icon-methods {
                    width: vw(26);
                    height: vw(26);
                }
            }

            .pay-name {
                height: 100%;
                margin-left: vw(56);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px #f5f5f5 solid;

                .selected {
                    width: vw(20);
                    height: vw(20);
                }

                .no-choose {
                    fill: #d8d8d8;
                }

                .choose {
                    fill: main-color;
                }
            }
        }
    }

    .confirm {
        position: relative;
        top: middleMargin;
        big-solid();
        margin: auto;
    }

    .prompt {
        width: 100%;
        margin-top: middleMargin;
        padding-top: middleMargin;
        text-align: center;
        word-vw(word12, gray9);
        line-height: vw(21);
    }
</style>
